<template>
  <el-row style="justify-content: center;align-items:center;height: 5vh;padding-left: 2%;padding-right: 3%;margin-bottom: 2%">
    <el-col :span="9">
      <el-text style="font-size: 30px">收银收入</el-text>
    </el-col>
    <el-col :span="15" style="text-align: right;">
      <el-button :class="curOption==='今日'?'curSelect':''" size="large" @click="today">今日</el-button>
      <el-button :class="curOption==='昨日'?'curSelect':''" size="large" @click="yesterday">昨日</el-button>
      <el-button :class="curOption==='本月'?'curSelect':''" size="large" @click="thisMonth">本月</el-button>
      <el-date-picker
          v-model="curPeriod"
          type="daterange"
          range-separator="->"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          unlink-panels
          size="large"
          style="margin: 0 0 0 10px"
          @change="changePeriod"
      />
    </el-col>
  </el-row>
  <el-row style="background-color: white;padding: 0 0 20px 0;">
    <el-col :span="8" :class="curSelectData==='salesVolume'?'curSelectData':''" style="text-align: center;padding: 15px 15px 15px 15px;" >
      <div @click="switchSelectData('salesVolume')">
        <el-statistic :value="curData.salesVolume" precision="2" :value-style="{fontSize: '30px'}">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              销售额(元)
            </div>
          </template>
        </el-statistic>
      </div>
    </el-col>
    <el-col :class="curSelectData==='transactionsNum'?'curSelectData':''" :span="8" style="text-align: center;padding: 15px 15px 15px 15px;">
      <div @click="switchSelectData('transactionsNum')">
        <el-statistic :value="curData.transactionsNum" :value-style="{fontSize: '30px'}">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              销售笔数
            </div>
          </template>
        </el-statistic>
      </div>
    </el-col>
    <el-col :class="curSelectData==='gross'?'curSelectData':''" :span="8" style="text-align: center;padding: 15px 15px 15px 15px;">
      <div @click="switchSelectData('gross')">
        <el-statistic :value="curData.gross" precision="2" :value-style="{fontSize: '30px'}">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              参考毛利额(元)
            </div>
          </template>
        </el-statistic>
      </div>
    </el-col>
  </el-row>
  <el-row style="background-color: white;padding: 0 0 20px 0;height: 500px">
    <div style="min-width: 100%; height: 100%;">
      <div id="myChart" style="width: 100%; height: 100%;"></div>
    </div>

  </el-row>
</template>

<script setup>
import {onMounted, ref, shallowRef} from "vue";
import request from "@/utils/request";
import {store} from "@/store";
import {dateTimeUtils} from "@/utils/dateTimeUtils";
import * as echarts from "echarts";

let businessDate=ref({
  storeId:store.getLocalCurrentStoreMain().storeId,
  startDate:"",
  endDate:""
})
const curData=ref({})
let curOption=ref("今日")
const curPeriod=ref([])
const curSelectData=ref("salesVolume")
const myChart=shallowRef()
onMounted(()=>{
  businessDate.value.startDate=dateTimeUtils.getBusinessDateBo(new Date()).formatDateByDay
  businessDate.value.endDate=dateTimeUtils.getBusinessDateBo(new Date(),1).formatDateByDay
  request.post("/business/get/businessIncomeByHour",businessDate.value).then(res=>{
    curData.value=res.data
    myChart.value = echarts.init(document.getElementById("myChart"));
    updateChartData()
  })
})
const switchSelectData = (type) => {
  curSelectData.value=type
  updateChartData()
}
const today = () => {
  curOption.value="今日"
  businessDate.value.startDate=dateTimeUtils.getBusinessDateBo(new Date()).formatDateByDay
  businessDate.value.endDate=dateTimeUtils.getBusinessDateBo(new Date(),1).formatDateByDay
  request.post("/business/get/businessIncomeByHour",businessDate.value).then(res=>{
    curData.value=res.data
    updateChartData()
  })
}
const yesterday = () => {
  curOption.value="昨日"
  businessDate.value.startDate=dateTimeUtils.getBusinessDateBo(new Date(),-1).formatDateByDay
  businessDate.value.endDate=dateTimeUtils.getBusinessDateBo(new Date()).formatDateByDay
  request.post("/business/get/businessIncomeByHour",businessDate.value).then(res=>{
    curData.value=res.data
    updateChartData()
  })
}
const thisMonth = () => {
  curOption.value="本月"
  businessDate.value.startDate=dateTimeUtils.getBusinessDateBo(new Date()).formatDateByMonth
  businessDate.value.endDate=dateTimeUtils.getBusinessDateBo(new Date(),1,"month").formatDateByMonth
  request.post("/business/get/businessIncomeByHour",businessDate.value).then(res=>{
    curData.value=res.data
    updateChartData()
  })
}
const changePeriod = () => {
  curOption.value="时间段"
  businessDate.value.startDate=dateTimeUtils.getBusinessDateBo(curPeriod.value[0]).formatDateByDay
  businessDate.value.endDate=dateTimeUtils.getBusinessDateBo(curPeriod.value[1].setDate(curPeriod.value[1].getDate()+1)).formatDateByDay
  request.post("/business/get/businessIncomeByHour",businessDate.value).then(res=>{
    curData.value=res.data
    updateChartData()
  })
}
const updateChartData=()=>{
  let curDataTemp
  if (curSelectData.value==="salesVolume"){
    curDataTemp=curData.value.incomeDetailBySalesVolume
  }else if(curSelectData.value==="transactionsNum"){
    curDataTemp=curData.value.incomeDetailByTransactionsNum
  }else if(curSelectData.value==="gross"){
    curDataTemp=curData.value.incomeDetailByGross
  }

  let row=Object.keys(curDataTemp)
  let col=[]
  row.sort(function (a, b) {
    return a.localeCompare(b)
  })

  for (let i in row){
    col.push(curDataTemp[row[i]])
  }
  console.log(row,col)
  myChart.value.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    xAxis: {
      type: 'category',
      data: row
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        data: col
      },
    ]
  });

}
</script>

<style scoped>
.curSelect{
  color: #ffa202;
}
.curSelectData{
  border: 1.5px solid #c2c2c2;
  border-bottom: none;
}
</style>